<template>
	<div class="page" id="today">
		<!--旧版本的今日的界面-->
		<section v-if="false" class="tab-desc">
			<div class="desc1 show">
				<Calendar :today='today' v-on:subDate='subDate' v-on:addDate='addDate' v-on:addMonth='addMonth' v-on:subMonth='subMonth'></Calendar>
				<Heart :today='today'></Heart>
				<Weight :today='today'></Weight>
				<div class="canyin">
					<div class="canyin-top">
						<i class="canyin-icon"></i>
						<span>餐饮</span>
					</div>
					<div class="canyin-bottom" v-if="uploadImg==null">今日还没有上传图片哦！！</div>
					<div class="canyin-bottom" v-else v-for="item in uploadImg">
						<div class="xueyuan">
							<div class="food-time">
								{{ item.tag }}
							</div>
							<div class="food-img clearfix">
								<img v-for=" item2 in item.images " :src="item2.url">
							</div>
						</div>
						<div class="jiaolian">
							<div class="eval-time">
								{{ item.tag }}
								
							</div>
							<div class="eval" v-for="item3 in item.replys">
								{{ item3.content }}
							</div>
						</div>
					</div>
				</div>
				<div class="upload-food">
					<input type="file" id="inputFile" @change="ChangeImg" />
					<button class="inputFileBtn" @click="upload" :disabled="nowShow==true? false : true">上传三餐图片...</button>
				</div>
			</div>
		</section>
		<!--新版本的今日的界面-->
		<duanlian :today="today"></duanlian>
		<!--添加遥控器-->
		<div class="remote">
			<a class="item item-service" @click="focusTo">
				<div class="wrapper">
					<div class='img animated swing' :style="'background-image: url('+$qiniu.url+'assets/img/remote.png)'">
					</div>
				</div>
			</a>
		</div>
		<!--进入关注的页面 新增关注后不显示此二维码-->
		<div class="service" v-if=!showGz>
			<a href="###" class="item item-service" @click="focusOn">
				<div class="wrapper" style="background-image: radial-gradient(circle at center, transparent 0%, transparent 40%, #00BA9B 100%);">
					<div class='img animated swing' :style="'background-image: url('+$qiniu.url+'assets/img/focus.png)'"></div>
				</div>
			</a>
		</div>
		<!--长按识别二维码-->
		<section class="eweimaWrapper" v-if="shoueweima == true">
			<div class="eweima">
				<!--<img class="eweima" :src="$qiniu.url+'assets/img/shape1.png'">-->
				<img class="eweima" :src="$qiniu.url+'assets/img/shape2.png'"/>
				<div @click="hideeweima" class="chacha" :style="'background-image: url('+$qiniu.url+'assets/img/chacha2.png)'"></div>
			</div>
		</section>
		<!--添加遥控器选择方式-->
		<section class="model" @click='getCancelAttention'>
			<div class="unity-tp animated bounceInUp" :style="'background-image: url('+$qiniu.url+'assets/img/remote-telephone.png)'" @click='focusTo'></div>
			<div class="unity animated bounceInUp" :style="'background-image: url('+$qiniu.url+'assets/img/remote-tv.png)'" @click='hideUnity'>
				<!--@click='hideUnity'点击取消遥控器-->
				<span class='tips' id='tips' >请选择您想使用的操作方式</span>
			</div>
		</section>
		<!--旧的遥控器选择方式-->
		<!-- <section class="model" v-once>
			<div v-once class="unity animated bounceInUp" :style="'background-image: url('+$qiniu.url+'assets/img/unityLogin1.png)'">
				<span v-once class='tips' id='tips'>下一步：请用遥控器操作电视</span>
				<span v-once class='getBtn' @click='hideUnity'>我知道了</span>
			</div>
		</section> -->
		<Loading v-if="LoadingShow"></Loading>
	</div>
</template>
<script>
	import Loading from './loading';
	import {
		isLeap,
		setCalendar,
		getToday,
		errFun,
		refreshTitle
	} from "../tools.js";
	import "../../static/css/table-calendar.css";
	import axios from 'axios';
	import Calendar from './Today/calendar.vue';
	import Heart from './Today/heart.vue';
	import Weight from './Today/weight.vue';
	import duanlian from './Today/duanlian.vue';
	import QINIU_API from "../api";
	import api from "../api";
	import Vue from 'vue';
	export default {
		computed: {
			LoadingShow() {
				return this.$store.state.loadings.show
      		},
      		userinfo() {
				  console.log(this.$store.state.user + "userinfo");
				return this.$store.state.user
			},
			// 关注自动关闭
			getUserInfo() {
				return this.$store.state.user
			},
			nowShow() {
				//判断当前的today是否是今日
				var nowDay = getToday(new Date()).day; //获取当前的时间---即今天的日期
				var nowMonth = getToday(new Date()).month;
				var nowYear = getToday(new Date()).year;
				if(this.today.day < nowDay || this.today.month < nowMonth || this.today.year < nowYear) {
					return false;
				} else {
					return true;
				}
			},
			// 需要进行判断
			showUnity() {
				if(this.$route.query.unity == 'unityLogin') {
					return true;
				} else {
					return false;
				}
			}

		},
		created() {
			refreshTitle(this.$route.meta.title);
			this.$store.dispatch('CHANGE_LOADING_SHOW');
			this.$store.dispatch('GET_USER_INFO');
			// 当且仅当从当前接口进入的时候清除掉时间的缓存
			if(window.localStorage.year != null) {
				window.localStorage.removeItem('year');
				window.localStorage.removeItem('month');
				window.localStorage.removeItem('day');
			}
		},
		data() {
			return {
				today: {
					year: getToday(new Date()).year,
					month: getToday(new Date()).month,
					day: getToday(new Date()).day,
				},
				uploadImg: [],
				select: null,
				shoueweima: false,
				test: "/today",
				showGz:false
			}
		},

		methods: {

			subDate: function() {

			},
			addDate: function() {

			},
			subMonth: function() {

			},
			addMonth: function() {

			},
			// 上传图片的逻辑
			upload() {
				//模拟file文本框的操作
				var fileInput = document.getElementById('inputFile');
				fileInput.click();
			},
			ChangeImg() {
				//获取图片的信息
				//   this.$store.dispatch('CHANGE_LOADING_SHOW');
				var file = document.querySelector("#inputFile");
				var data = file.files[0];
				var type = data.type;
				var imgType = type.slice(6, type.length);
				if(!(imgType === 'png' || imgType === 'jpg' || imgType === 'gif' || imgType === 'jpeg')) {
					alert('请选择正确的文件');
					return false;
				}
				//讲图片的信息传递给后端获取token
				this.getToken(imgType, data);
			},
			getToken(imgType, data) {
				var that = this;
				api.getImgToken().then(function(result) {
					//将获取的token值与图片进行合并，并且上传到七牛
					var key = result.data.key + '.' + imgType;
					var token = result.data.token;
					var img = data;
					that.upQiniu(token, key, img);
				}, errFun)
			},
			upQiniu(token, key, img) {
				var formData = new FormData();
				formData.append('token', token);
				formData.append('key', key);
				formData.append('file', img);
				var that = this;
				//   this.$store.dispatch('CHANGE_LOADING_SHOW');
				axios.post(QINIU_API, formData, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				}).then(function(data) {
					var data = data.data;
					api.sendSuccess(data).then(function() {
						//   that.$store.dispatch('CHANGE_LOADING_SHOW');
						that.rendar(that);
					})
				})
			},
			// 上传图片的逻辑结束
			//更新图片
			rendar(that) {
				var that = this;
				// that.$store.dispatch('CHANGE_LOADING_SHOW');
				var date = that.GETDATE(that);
				//   that.$store.dispatch('CHANGE_LOADING_SHOW');
				api.getUploadImg(date).then(function(result) {
					//将获取来的数据进行解析
					that.uploadImg = result.data;
					// that.$store.dispatch('HIDDEN_LOADING_SHOW');
				})
			},

			//获取日期拼接字符串
			GETDATE(that) {
				var month = that.today.month;
				var year = that.today.year;
				var day = that.today.day;
				return year + "-" + month + "-" + day;
			},
			// 进行页面的弹框的显示
			getShowunity() {
				//为了加遥控器显示才改为true
				if(this.showUnity == true) {
					// 显示
					var model = document.querySelector('.model');
					model.style.display = 'block';
					return;
				}
			},
			hideUnity() {
				// 点击的时候进行
				var target = event.target;
				var tips = document.querySelector('#tips');
				var unity = document.querySelector('.unity');
				//var unityTp = document.querySelector('.unity-tp');
				var model = document.querySelector('.model');
				var uniBtn = document.querySelector('.getBtn');
				tips.style.display = 'none';
				model.style.display = 'none';
				unity.classList.add('hideUnity');
				//unityTp.classList.add('hideUnity');
				setTimeout(function() {
					// uniBtn.style.display = 'none';
					target.parentNode.parentNode.style.display = 'none';
				}, 400);
			},
			scrollTop() {
				var upNow = document.querySelector('#upNow');
				if(upNow) {
					if(document.body.scrollTop > 600) {
						// 显示
						upNow.style.display = 'block';
					} else {
						upNow.style.display = 'none';
					}
					return;
				}

			},
			focusOn() {
				// 显示二维码的图片
				this.shoueweima = true;
				this.test = this.$route.path;
				// console.log(test);
				// this.$store.dispatch('CHANGE_EWEIMA_SHOW');
			},
			focusTo() {
				//跳转遥控器
				this.$router.push({
          			path: '/remote'
				})
				
			},
			hideeweima() {
				this.shoueweima = false;
			},
			//关注的用户隐藏绿色心，不关注显示
			getCancelAttention(){
				api.getCloseRctips().then( (result) => {
					if(result.status == 200) {
						console.log("haha");
						// console.log(result);
					}
				}).catch(function(err){
        			console.log(err);
				});
			},
		},
		components: {
			Loading,
			Calendar,
			Heart,
			Weight,
			duanlian,
		},
		watch: {
			today: {
				handler: function(val, oldVal) {
					this.rendar(this);
				},
				deep: true
			},
			test: {
				handler: function(val, oldVal) {
					window.location.reload();
				},
				deep: true
			}
		},
		mounted() {
			//获取个人用户信息,判断是否关注
			var user = this.getUserInfo;
			// console.log(user);
			this.showGz = user.subscribe;
			console.log(user + "user");
			console.log(this.showGz + "subscribe");
			this.$nextTick(function() {
				var that = this;
				this.rendar(this);
				this.getShowunity();
				window.onscroll = this.scrollTop;
				window.localStorage.removeItem('year');
				window.localStorage.removeItem('month');
				window.localStorage.removeItem('day');
				var service = document.querySelector(".service");
				// console.log(service);
				// window.clearTimeout(time1);
				// var time1 = setTimeout(function() {
				// service.style.display = "block";
				// window.location.reload();
				// }, 1000)
				// console.log(getUserInfo.subscribe);
			});
		},
		created(){
			var user = this.getUserInfo;
			console.log(this.showGz + "subscribecreated");
		}
	}
</script>
<style>
	#today {
		.canyin {
			width: 100%;
			background: #31384b;
			margin-bottom: 15px;
			position: relative;
			color: #d7d6db;
		}
		.canyin .canyin-top {
			width: 100%;
			height: 50px;
			border-bottom: 1px solid #22293b;
			position: relative;
		}
		.canyin .canyin-top .canyin-icon {
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 25px;
			height: 30px;
			/*background:  url("../assets/img/course.png") -70px 0 no-repeat;*/
			background-size: 300px 40px;
		}
		.canyin .canyin-top span {
			width: 40px;
			display: block;
			margin-left: 46px;
			text-align: center;
			font-size: 16px;
			line-height: 50px;
		}
		.canyin .canyin-bottom {
			width: 100%;
			/*height: 200px;*/
			font-size: 14px;
			line-height: 30px;
			text-indent: 10px;
		}
		.canyin .canyin-bottom .xueyuan {
			width: 100%;
			padding-left: 10px;
			border-bottom: 1px dashed #22293b;
		}
		.canyin .canyin-bottom .xueyuan .food-time {
			width: 100%;
			height: 30px;
			font-size: 14px;
			line-height: 30px;
		}
		.canyin .canyin-bottom .xueyuan .food-img {
			width: 100%;
			box-sizing: border-box;
		}
		.canyin .canyin-bottom .xueyuan .food-img img {
			display: block;
			width: 100px;
			height: 80px;
			border-radius: 10px;
			float: left;
			margin-right: 5px;
			margin-bottom: 5px;
		}
		.canyin .canyin-bottom .jiaolian {
			width: 100%;
			padding-left: 10px;
			border-bottom: 1px solid #22293b;
		}
		.canyin .canyin-bottom .jiaolian .eval-time {
			width: 100%;
			height: 20px;
			font-size: 14px;
			line-height: 20px;
		}
		.canyin .canyin-bottom .jiaolian .eval {
			width: 100%;
			height: 30px;
			padding-left: 10px;
			margin-bottom: 10px;
			font-size: 14px;
			line-height: 30px;
		}
		.upload-food {
			width: 100%;
			height: 40px;
			background: #00bb9c;
			position: fixed;
			bottom: 50px;
			left: 0px;
			text-align: center;
			font-size: 16px;
			line-height: 40px;
			color: #ffffff;
		}
		.upload-food input[type="file"] {
			display: none;
		}
		.upload-food .inputFileBtn {
			width: 100%;
			height: 100%;
			background: none;
			border: none;
			outline: none;
			color: #fff;
		}
		.upload-food label {
			display: block;
			width: 100%;
			height: 100%;
			position: relative;
		}
		.hide {
			display: none;
		}
		.show {
			display: block;
		}
		.service,
		.remote {
			position: fixed;
			bottom: 15%;
			right: 5%;
			/* display: none; */
		}
		.service p,
		.remote p {
			color: #ccc;
			padding-top: 0.3rem;
		}
		.service .item-service,
		.remote .item-service {
			width: auto;
		}
		.service .wrapper,
		.remote .wrapper {
			height: 46px;
			width: 46px;
			border-radius: 50%;
			background-origin: border-box;
			position: relative;
			top: 0;
			left: 50%;
			-webkit-transform: translateX(-50%);
			
		}
		.service .wrapper .img {
			width: 26px;
			height: 22px;
			position: absolute;
			background-repeat: no-repeat;
			background-size: cover;
			left: 50%;
			top: 50%;
			margin-left: -13px;
			margin-top: -10px;
		}
		.remote .wrapper .img {
			width: 46px;
			height: 46px;
			position: absolute;
			background-repeat: no-repeat;
			background-size: cover;
			left: 50%;
			top: -93%;
			margin-left: -24px;
			margin-top: -19px;
		}
		/*添加选择遥控器类型*/
		.model {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .8);
			display: none;
			z-index: 99999;
		}
		.model .unity {
			width: 300px;
			height: 85px;
			position: absolute;
			top: 10%;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background-size: contain;
			background-repeat: no-repeat;
		}
		.model .unity-tp {
			width: 72xp;
			width: 300px;
			height: 122px;
			position: absolute;
			top: -22%;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background-size: contain;
			background-repeat: no-repeat;
		}
		.model .unity .hideUnity,.model .unity-tp .hideUnity{
			transition: all 1s;
			top: -100%;
			height: 0px;
			width: 0px;
		} 
		.model .unity .tips,
		.model .unity-tp .tips{
			font-size: 16px;
			color: #fbb811;
			position: absolute;
			top: 131px;
			right: 0px;
			bottom: 0px;
			margin: auto;
			display: block;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
		/*老样式*/
		/* .model {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .8);
			display: none;
			z-index: 99999;
		}
		.model .unity {
			width: 300px;
			height: 500px;
			border: 1px solid #fff;
			position: absolute;
			top: 10%;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background-size: contain;
			background-repeat: no-repeat;
		}
		.model .unity.hideUnity {
			transition: all 1s;
			top: -100%;
			height: 0px;
			width: 0px;
		}
		.model .unity .tips,
		.model .unity .getBtn {
			font-size: 16px;
			color: #fbb811;
			position: absolute;
			top: 85px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
			display: block;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
		} 
		 .model .unity .getBtn {
			top: 325px;
			color: #000;
		} */
		/*二维码的样式*/
		.eweimaWrapper {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .8);
			z-index: 99999;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: column;
		}
		.eweima {
			/*width: 325px;
			height: 455px;*/
			padding: 20px;
			box-sizing: border-box;
			border-radius: 5px;
			position: relative;
		}
		.eweima img {
			width: 100%;
			height: 100%;
			padding-bottom: 64px;
			box-sizing: border-box;
		}
		.chacha {
			width: 40px;
			height: 40px;
			background-size: cover;
			background-repeat: no-repeat;
			border-radius: 50%;
			position: absolute;
			top: 20px;
			right: 20px;
		}
	}
</style>